<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js的函数和事件处理</title>
		<!-- 开源插件的样式文件 -->
		<link rel="stylesheet" href="css/index.css">
		
		
		<script type="text/javascript">
			
			// 定义函数			
			function showMsg(strMsg){
				//document.write("helloworld,"+strMsg)
				window.document.getElementById("lblMsg").innerHTML = "helloworld,"+strMsg;
			}
			
			// 调用函数
			//showMsg("小明")
		</script>
		<!-- 开源插件的js -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		
	</head>
	<body>
		<label id="lblMsg">
			
		</label>
		<br>
		<input type="button" value="showMsg" onclick="showMsg('小明');" />
		&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="button" value="showMsg" onclick="document.getElementById('lblMsg').innerHTML = 'helloworld';" />
		<br>
		<div class="carousel content-main">
		<ul class="list">
			<li><img src="img/photo_1.jpg"></li>
			<li><img src="img/photo_2.jpg"></li>
			<li><img src="img/photo_3.jpg"></li>
			<li><img src="img/photo_4.jpg"></li>
			<li><img src="img/photo_5.jpg"></li>
			<li><img src="img/photo_3.jpg"></li>
			<li><img src="img/photo_4.jpg"></li>
			<li><img src="img/photo_5.jpg"></li>
			<li><img src="img/photo_3.jpg"></li>
			<li><img src="img/photo_4.jpg"></li>
			<li><img src="img/photo_5.jpg"></li>
		</ul>
		</div>
	
	</body>
	<!-- js脚本放在body后面，因为js脚本需要操作body中的对象，所以需要方法body后面 -->
	<script type="text/javascript">
	var setting = {
		width:1000,
		height:270,
		postWidth:658,
		postHeight:270,
		scale:0.8,
		speed:500,
		verticalAlign:"center"
	}
	$(".carousel").attr("data-setting",'{ "width":900,"height":411,"postWidth":658}')
	Carousel.init($(".carousel"))
	</script>
</html>
